<template>
	<view>
		<view style="padding-bottom: 150rpx;">
			<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
			<u-search style="margin: 0 20rpx;" v-if="!isEmpty" placeholder="请输入客户编码/手机号搜索" v-model="keyword" @search="search" @custom="search"></u-search>
			<view class="assist_info" v-if="!isEmpty" v-for="(res, index) in dataList" @click="jumpPage(res)">
				<view class="assist_box">
					<view>
						<view class="user_info">
							<view class="nick_name u-line-1">{{res.name}}({{res.spread_code}})</view>
							<view class="user_level">
								<image class="levelIcon" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/level.png"></image>
								<view class="level_txt">{{res.level_name}}</view>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view class="user_remark">推荐人:{{res.leader.paper_no.length>0?res.leader.real_name:res.leader.name}}({{res.leader.spread_code}})</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view class="user_remark">手机号码:{{res.phone}}</view>
							<view class="user_remark">注册时间:{{res.create_time}}</view>
						</view>
						
					</view>
				</view>
				<!-- <view class="assist_time"><u-icon name="trash-fill" color="#fa3534" :size="45"></u-icon></view> -->
			</view>
			<u-loadmore :status="status" v-if="!isEmpty" color="#909399" :margin-top="20"/>
			<login-model ref="loginModel"></login-model>
		</view>
		
		<view class="addSite" @click="toRegister">
			<view class="add">
				<u-icon name="plus-people-fill" color="#ffffff" :size="40"></u-icon>我要代购
			</view>
		</view>
		<u-modal v-model="modelShow" :show-title="false" :show-cancel-button="true"
			 confirm-color="#20cbd4" @confirm="onRegister"> <!-- @confirm="addAssist" -->
			<view style="margin-top: 15rpx;">
				<u-field class="contentItem"
					v-model="assist_form.real_name"
					label="姓名"
					placeholder="请填写被代购人姓名"></u-field>
				<u-field class="contentItem"
					v-model="assist_form.phoneNumber"
					label="手机号"
					:maxlength="11"
					placeholder="请填写被代购人手机号"></u-field>
				<!-- <u-field class="contentItem"
					v-model="assist_form.code"
					label="验证码"
					:maxlength="4"
					placeholder="请填写验证码"
				>
					<u-button size="mini" slot="right" :custom-style="{background:'#20cbd4',border:'#fff',color:'#fff'}" @click="getCode">{{assist_form.codeText}}</u-button>
				</u-field> -->
				<u-field class="contentItem"
					v-model="assist_form.password"
					label="密码" :password="true"
					placeholder="请输入密码"></u-field>
				<u-field class="contentItem"
					v-model="assist_form.invitationCode"
					label="邀请码" placeholder="网体内的会员编号" @blur="invitationCodeChange"></u-field>
				<u-field class="contentItem"
					v-model="assist_form.invitationTitle"
					label="会员名" placeholder="" disabled="true"></u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>
		</u-modal>
		<u-toast ref="uToast"/>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {userInfo,getAssistList,getPhoneCode,register,getAssistCode} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				keyword:"",
				dataList: [],
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				isEmpty:false,
				emptyImg:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/empty_goods.png",
				emptyTxt:"暂无我的代购",
				uid:'',//用户id
				paper_no:'',
				spread_code:'' ,//用户邀请码
				spread_name:'',//用户姓名（真实姓名或者昵称）
				type:'',
				substa:true,
				modelShow:false,
				assist_form:{
					real_name:"",
					phoneNumber:"",
					code:"",
					codeText:"",
					invitationCode:"",
					invitationTitle:"",
					password:""
				}
			}
		},
		onLoad: function(options) {
			let type = options.type || '';
			this.type = type;
		},
		onShow: function() {
			userInfo(this)
			this.dataList=[];
			this.pageStart = 1;
			this.addistList();
		},
		onReachBottom: function() {
			if(this.total/(this.pageStart*this.pageSize)>1){
				this.pageStart++;
				this.addistList();
			}else{
				this.status = 'nomore';
			}
		},
		onBackPress(e) {
			if(e.from==="backbutton" || e.from==="navigateBack"){
				uni.redirectTo({
					url: '/pages/tabBar/user'
				})
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			codeChange(text) {
				this.assist_form.codeText = text;
			},
			invitationCodeChange(e){
				this.substa=false;
				var text=e.detail.value;
				this.assist_form.invitationCode=text;
				getAssistCode(this,{'asscode':this.assist_form.invitationCode});
				// console.log('assistInfo',this.assistInfo);
				// console.log('invitationCodeChange',text);
				
			},
			setAssInfo(data){
				// console.log('setAssInfo',data);
				if(data.code=='200'){
					this.substa=true;
					this.assist_form.invitationCode=data.data.spread_code;
					this.assist_form.invitationTitle=data.data.paper_no.length>0?data.data.real_name:data.data.name;
				}else{
					this.toRegister();
					this.$refs.uToast.show({title: data.msg});
					this.substa=false;
				}
			},
			getCode() {
				// if(!this.$u.test.mobile(this.assist_form.phoneNumber)){
				// 	this.$refs.uToast.show({title: '您输入的手机号不正确'});
				// 	return;
				// }
				if(!this.$u.test.digits(this.assist_form.phoneNumber)){
					this.$refs.uToast.show({title: '请输入11位数字的手机号'});
					return;
				}
				if(this.assist_form.phoneNumber.length != 11){
					this.$refs.uToast.show({title: '您输入的手机号不是11位'});
					return;
				}
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
				    getPhoneCode(this,{phone:this.assist_form.phoneNumber,type:"register"})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			onRegister(){
				this.modelShow=true
				// if(!this.$u.test.mobile(this.assist_form.phoneNumber)){
				// 	this.$refs.uToast.show({title: '您输入的手机号不正确'});
				// 	return;
				// }
				/* if(!this.$u.test.code(this.assist_form.code,4)){
					this.$refs.uToast.show({title: '您输入的验证码不正确'});
					return;
				} */
				if(!this.$u.test.digits(this.assist_form.phoneNumber)){
					this.$refs.uToast.show({title: '请输入11位数字的手机号'});
					return;
				}
				if(this.assist_form.phoneNumber.length != 11){
					this.$refs.uToast.show({title: '您输入的手机号不是11位'});
					return;
				}
				if(!this.$u.test.rangeLength(this.assist_form.password, [6, 16])){
					this.$refs.uToast.show({title: '您输入的密码不正确'});
					return;
				}
				if(this.substa){
					// console.log(this.uid);
					register(this,{real_name:this.assist_form.real_name,phone:this.assist_form.phoneNumber,code:this.assist_form.code,spread_code:this.assist_form.invitationCode,password:this.assist_form.password,assist_id:this.uid});
				}else{
					this.$refs.uToast.show({title: '当前推荐码不可用'});
					return;
				}
			},
			addistList(){
				getAssistList(this,{page:this.pageStart,limit:this.pageSize})
			},
			search(){
				// if(this.keyword==""){
				// 	this.$u.toast("请输入客户编码/手机号搜索");
				// 	return;
				// }
				this.dataList=[];
				this.total=0;
				getAssistList(this,{page:this.pageStart,search:this.keyword,limit:this.pageSize})
				
			},
			toRegister(){
				// console.log('toRegister');
				// this.spread_name=this.paper_no.length>0?this.realName:this.nickName
				// this.assist_form.invitationCode = this.spread_code
				// this.assist_form.invitationTitle = this.spread_name
				// this.modelShow=true
				uni.switchTab({
					url: '/pages/tabBar/cart'
				})
				
			},
			jumpPage(item){
				if(this.type=='select'){
					uni.setStorageSync('assist_uid', item.uid);
					uni.setStorageSync('assist_name', item.name);
					uni.navigateBack(-1)
				}
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #20cbd4;
	}
	.assist_info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 140rpx;
		border-radius: 50rpx;
		background: rgba(19,121,127,.2);
		padding: 10rpx 40rpx;
		margin: 30rpx 20rpx;
	}
	.assist_box{
		display: flex;
		align-items: center;
	}
	.user_info{
		display: flex;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}
	.nick_name{
		color: #FFFFFF;
		margin-right: 40rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}
	.user_level{
		height: 40rpx;
		background: linear-gradient(90deg, #fbbf48,#fff) no-repeat;;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}
	.levelIcon{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		position: relative;
		left: -5rpx;
	}
	.level_txt{
		text-align: center;
		font-size: 20rpx;
		color: #20CBD4;
	}
	.user_remark{
		font-size: 22rpx;
		margin-left: 20rpx;
		color: #13797f;
	}
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 30rpx;
		left: 80rpx;
		background-color: #13797f;
		border-radius: 60rpx;
		font-size: 30rpx;
	}
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
	}
	.icon{
		margin-right: 20rpx;
	}
</style>
